<template>
     
    <div class="shop-cate">
        <Teleport to=".header">
            <Header></Header>
        </Teleport>
        <div class="slide">
            
            <van-sidebar v-model="active"  @change="slideBarChangeHandler">
                <van-sidebar-item v-for="item in cateList" :key="item" :title="item"  />
            </van-sidebar>
        </div>
        <div class="container">
            <div class="box" v-for="(item, index) in goodsList" :key="index">
                <div class="title">{{ item.brandname}}</div>
                <van-grid :column-num="3">
                    <van-grid-item v-for="value in item.goods" :key="value.proid" icon="photo-o" class="img_p">
                        <van-image  style="width: 60px; height: 60px;" :src="value.img1" />
                        <p class="cate-list-price">{{ value.originprice}}</p>
                    </van-grid-item>
                </van-grid>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import Header from '@/components/header.vue'
import { ref,onMounted } from 'vue';  
import { getCateList ,getCateGoodslist,getGoodsByCateAndBrand} from '@/apis/goodsList'

interface goods {
    catename: string
    brandname:string
    goods:Array<{proid:string,[key:string]:any}>
}

const cateList = ref<string[]>([])
const goodsList = ref<goods[]>([])
const active = ref<number>()
//获取slide列表
const cateListTequest=async()=>{
    const res = await getCateList()
    // console.log(res)
    cateList.value=res.data
    slideBarChangeHandler(0)
    
}

// 导航条改变事件
const slideBarChangeHandler = (index: number) => {
    // console.log(index)
    goodsList.value=[]
  // 拿到当前分类
  getGoodsByCate(cateList.value[index])
}

// 准备一个请求某分类产品的方法
const getGoodsByCate =async( cate:string )=>{
    // console.log('根据分类先关数据',cate)
    //分类下的品牌
    const res = await getCateGoodslist(cate)
    // console.log(res)

    res.data.forEach(async (item:{brand:string}) => {
        const info = await getGoodsByCateAndBrand(item.brand,cate)
        // console.log(info)
        //组装数组
        goodsList.value.push({
            catename:cate,
            brandname:item.brand,
            goods:info.data
        })

        // console.log(goodsList.value)

    })
}
onMounted(()=>{
    cateListTequest()
})
</script>

<style lang="scss" scoped>
.shop-cate{
    display: flex;
    overflow: hidden;
    height: 100%;
    > .slide {
        width: 80px;
        overflow: auto;
        .cate-text{
            font-weight: 400;
            text-align: center;
            background-color: #f6f6f6;
        }
    }
    > .container {
        flex: 1;
        padding: 10px;
        overflow: auto;
        >.box{
            margin-top: 30px;
            .img_p{
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
.van-sidebar-item--select:before{
    width: 0;
}
</style>